<template>
  <!-- 此页面是拜访人填写基本信息  第一步接待人填写完基本信息以后生成链接到此页面 第二步拜访人点击链接到达此页面选择是否接站 是否预定酒店 保存信息 -->
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">

      <el-row :gutter="15" class=" main" :style="{margin: '0 auto',width: '100%'}">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="140px" label-position="right">
          <template v-if="!loading">
            <!-- <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="拜访编码" prop="visitnum">
                    <el-input disabled v-model="dataForm.visitnum" placeholder="请输入" clearable
                      :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col> -->
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="来访单位" prop="lfcompant">
                    <el-input disabled v-model="dataForm.lfcompant" placeholder="请输入" clearable
                      :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="来访事由" prop="lfreason">
                    <el-input disabled v-model="dataForm.lfreason" placeholder="请输入" clearable
                      :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="来访联系人姓名" prop="lfperson">
                    <el-input disabled v-model="dataForm.lfperson" placeholder="请输入" clearable
                      :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="来访联系人电话" prop="lfphone">
                    <el-input disabled v-model="dataForm.lfphone" placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="本次接待负责人姓名" prop="jdperson">
                    <el-input disabled v-model="dataForm.jdperson" placeholder="请输入" clearable
                      :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="本地接待负责人电话" prop="jdphone">
                    <el-input disabled v-model="dataForm.jdphone" placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="接待开始时间" prop="jdstarttime">
                    <el-date-picker disabled v-model="dataForm.jdstarttime" placeholder="请选择" clearable
                      :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp">

                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="接待结束时间" prop="jdendtime">
                    <el-date-picker disabled v-model="dataForm.jdendtime" placeholder="请选择" clearable
                      :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp">

                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="来访目的" prop="lftarger">
                    <el-input disabled v-model="dataForm.lftarger" placeholder="请输入" :style='{"width":"100%"}' true
                      type="textarea" :autosize='{"minRows":4,"maxRows":4}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="备注" prop="lfrmk">
                    <el-input disabled v-model="dataForm.lfrmk" placeholder="请输入" :style='{"width":"100%"}' true
                      type="textarea" :autosize='{"minRows":4,"maxRows":4}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否接站" prop="visitnum">
                    <!-- v-model="row.shelf_state"  @change="handleStatusChange($event,row)"-->
                    <el-switch v-model="isstation" class="switch" :active-value="1" :inactive-value="0" active-text="是"
                      inactive-text="否" :disabled="pageDisabled" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否预定酒店" prop="visitnum">
                    <!-- v-model="row.shelf_state"  @change="handleStatusChange($event,row)"-->
                    <el-switch v-model="ishotel" class="switch" :active-value="1" :inactive-value="0" active-text="是"
                      inactive-text="否" :disabled="pageDisabled" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="24">
                  <div style="display: flex;align-items: center;height: 100px;">
                    <h3>拜访人名单</h3>
                    <el-button v-if="!pageDisabled" type="text"
                      style="font-size: 18px;cursor: pointer;margin-left: 20px;" @click="addVis">添加
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <div v-for="(item,index) in visitors" :key="index">
              <el-col :span="8">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="来访人姓名">
                      <el-input :disabled="pageDisabled" v-model="item.lfrname" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="来访人职位">
                      <el-input :disabled="pageDisabled" v-model="item.lfrpost" placeholder="请输入" clearable :style='{"width":"100%"}'></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-row :gutter="15">
                  <el-col :span="24">
                    <el-form-item label="来访人电话">
                      <el-input :disabled="pageDisabled" v-model="item.lfrphone" placeholder="请输入" type="number" clearable
                        :style='{"width":"100%"}'>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
              <template v-if="isstation==1">
                <el-col :span="8">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="航班车次">
                        <el-input :disabled="pageDisabled" v-model="item.flightnum" placeholder="请输入" clearable :style='{"width":"100%"}'>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="16">
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="到达时间">
                        <el-date-picker :disabled="pageDisabled" v-model="item.arrivetime" placeholder="请选择" clearable :style='{"width":"100%"}'
                          type="date" format="yyyy-MM-dd HH:ss:mm" value-format="timestamp">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-col>
              </template>

            </div>

          </template>
        </el-form>
      </el-row>
      <div class="JNPF-common-page-header" style="justify-content: center;align-items: center;" v-if="!pageDisabled">
        <div class="options" style="display: flex;justify-content: center;align-items: center;margin: 0;">

          <el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import request from '@/utils/request'
  import {
    getDictionaryDataSelector
  } from '@/api/systemData/dictionary'
  import {
    getDataInterfaceRes
  } from '@/api/systemData/dataInterface'

  export default {
    components: {},
    props: [],
    data() {
      return {
        loading: false,
        ishotel: 0, //是否预定酒店
        isstation: 0, //是否接站
        dataForm: {
          visitnum: '',
          lfcompant: '',
          lfreason: '',
          lfperson: '',
          lfphone: '',
          jdperson: '',
          jdphone: '',
          jdstarttime: '',
          jdendtime: '',
          lftarger: '',
          lfrmk: '',
        },

        rules: {},
        visitors: [],
        pageDisabled: false
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getDetail(this.$route.query.receivebaseid);
    },
    mounted() {},
    methods: {
      addVis() {
        var obj = {
          "arrivetime": '', //到达时间
          "flightnum": "", //航班车次
          "lfrname": "", //来访人姓名
          "lfrphone": "", //来访人电话
          "lfrpost": "", //职称
        }
        this.visitors.push(obj);
      },
      goBack() {
        this.$emit('refresh')
      },
      init() {},
      getDetail(receivebaseid) {
        request({
          url: `/api/example/BusReceiveBaseInfo/${receivebaseid}`,
          method: 'get',
        }).then((res) => {
          this.dataForm = res.data;
          this.ishotel = res.data.ishotel || 0;
          this.isstation = res.data.isstation || 0;
        })
        request({
          url: `/api/example/BusBaseVisitors/personList/${receivebaseid}`,
          method: 'get',
        }).then((res) => {        
          if (res.code == 200 && res.data.length > 0) {
            this.pageDisabled = true;
            this.visitors = res.data;
          }
          // this.dataForm=res.data
        })
      },
      // 表单提交
      dataFormSubmit() {
        request({
          url: `/api/example/BusBaseVisitors`,
          method: 'post',
          data: {
            baseid: this.$route.query.receivebaseid,
            ishotel: this.ishotel,
            isstation: this.isstation,
            visitors: this.visitors,
          }
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('操作成功')
            setTimeout(() => {
              location.reload()
            }, 2000)
          } else {
            this.$message.warning('服务器报错，请联系管理员')
          }
        })
        // this.$refs['elForm'].validate((valid) => {
        //   if (valid) {
        //     var _data = this.dataList()
        //     request({
        //       url: `/api/system/Bus_receive_base_info`,
        //       method: 'post',
        //       data: _data
        //     }).then((res) => {
        //       this.$message({
        //         message: res.msg,
        //         type: 'success',
        //         duration: 1000,
        //         onClose: () => {
        //           this.resetForm()
        //           this.goBack();
        //         }
        //       })
        //     })
        //   }
        // })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
        this.init()
      },
      dataList() {
        var _data = JSON.parse(JSON.stringify(this.dataForm));
        return _data;
      },
      dataInfo(dataAll) {
        let _dataAll = dataAll
        this.dataForm = _dataAll
      },
    },
  }

</script>
